<template>
  <div class="detail">
    <back-header></back-header>
    <van-swipe
      class="my-swipe"
      ref="swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item v-for="(item, index) in detailObj.pics2" :key="index">
        <img :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="expe">
      <h5>{{ detailObj.basicInfo?.name }}</h5>
      <p>{{ detailObj.basicInfo?.characteristic }}</p>
      <section>
        <span style="color: red"
          >低价￥{{ detailObj.basicInfo?.minPrice }}</span
        >
        <span> 原价￥{{ detailObj.basicInfo?.originalPrice }}</span>
        <span class="right">库存{{ detailObj.basicInfo?.stores }}</span>
      </section>
    </div>
    <detail-title @childTab="tab"></detail-title>
    <div v-show="checkIndex == 0" v-html="detailObj.content"></div>
    <div v-show="checkIndex == 1">
      <van-empty description="暂无数据" />
    </div>
  </div>
  <van-action-sheet v-model:show="show" title=" ">
    <div class="foot-top">
      <img :src="detailObj.basicInfo?.pic" alt="" />
      <section>
        <p>{{ detailObj.basicInfo?.name }}</p>
        <p class="ft-tp-ft">￥{{ goodPrice }}</p>
      </section>
    </div>
    <ul class="foot-center">
      <li v-for="(item, index) in detailObj.properties" :key="index">
        <h6>{{ item.name }}</h6>
        <ol>
          <!-- <li v-for="(n,i) in item.childsCurGoods" :key="i" :class="{active: n.id == checkId[index]}" @click="checkBtn(n,index)">{{n.name}}-{{index}}</li> -->
          <li
            v-for="(n, i) in item.childsCurGoods"
            :key="i"
            :class="{ active: checkId.some(item => item == n.id)}"
            @click="checkBtn(n, index)"
          >
            {{ n.name }}
          </li>
        </ol>
      </li>
    </ul>
    <div class="foot-bottom">
      <span>购买数量</span>
      <van-stepper v-model="buyNum" />
    </div>
    <van-button type="danger" :block="true" @click="addCart">加入购物车</van-button>
  </van-action-sheet>
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
    <van-action-bar-icon icon="cart-o" text="购物车" :badge="$store.state.carList.length"/>
    <van-action-bar-icon
      :icon="showStart ? 'star' : 'star-o'"
      :text="showStart ? '已收藏' : '未收藏'"
      color="#ff5000"
      @click="showStart = !showStart"
    />
    <van-action-bar-button type="warning" text="立即购买" />
    <van-action-bar-button type="danger" @click="show=true" text="加入购物车" />
  </van-action-bar>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { Notify } from 'vant';
import { useRoute } from "vue-router";
import { detail,getPrice } from "../../api/second/index";
import backHeader from "../../components/backHeader.vue";
import DetailTitle from "../../components/detailTitle.vue";
import { useStore } from 'vuex';
export default {
  components: { backHeader, DetailTitle },
  setup() {
    const store = useStore();
    const route = useRoute();
    let id = route.params.id;
    const data = reactive({
      detailObj: {}, // 详情页面的数据
      checkId: [], // 选中规格数据的id
      goodPrice: '', // 商品的价格
      checkName: [], // 选中规格的名字
    });
    const checkIndex = ref(0);
    const showStart = ref(false); // 是否收藏

    const show = ref(false); // 动作面板是否展示

    const buyNum = ref(1); // 购买数量

    detail({ id: id }).then((res) => {
      // 详情页面的接口
      data.detailObj = res.data;
      data.goodPrice = res.data.basicInfo?.minPrice // 价格的初始值
    });
    const tab = (i) => {
      // 商品介绍切换的函数
      checkIndex.value = i;
    };

    const checkBtn = (val, childIndex) => {
      // console.log(childIndex);
      data.checkId[childIndex] = val.id;
      data.checkName[childIndex] = val.name;
      // let arr = [0,1,2,3];
      // arr[0] = 10
      // arr[7] = 20;
      // console.log(arr);
      getPrice({goodsId:id,propertyChildIds:data.checkId.join(',')}).then(res => {
        data.goodPrice = res.data.price;
      })
    };
    const addCart = () => { // 加入购物车
      show.value = false;
      // detailObj.properties 后台返回给我们的规格数据
      if (data.checkId.length == data.detailObj.properties.length) {
        let obj = {
          isCheck: false, // 是否选中的标识
          imgurl: data.detailObj.basicInfo?.pic, // 商品图片
          num: buyNum.value, // 购买数量
          price: data.goodPrice, // 商品的价格
          name: data.detailObj.basicInfo?.name, // 商品的名字
          checkId: data.checkId.join(','), // 选中的规格的id
          checkName: data.checkName// 选中的规格的名字
        }
        store.commit('addCart',obj);
      } else {
        Notify({ type: 'warning', message: '请选择商品规格' });
      }
    }
    return {
      ...toRefs(data),
      tab,
      checkIndex,
      showStart,
      show,
      buyNum,
      checkBtn,
      addCart
    };
  },
};
</script>
<style lang="scss" scoped>
.detail {
  height: 100%;
  background: #e9e9e9;
}
.my-swipe {
  img {
    width: 100%;
    height: 375px;
  }
}
.expe {
  background: #fff;
  padding: 0 10px;
  overflow: hidden;
  margin-top: -1px;
  h5 {
    font-size: 16px;
    margin: 15px 0;
  }
  p {
    color: #999999;
    font-size: 13px;
    margin-bottom: 15px;
  }
  section {
    font-size: 14px;
    color: #999999;
    margin-bottom: 5px;
    .right {
      float: right;
    }
  }
}
.foot-top {
  padding: 10px;
  display: flex;
  border-bottom: 1px solid #ccc;
  img {
    height: 62px;
    width: 62px;
  }
  section {
    flex: 1;
    margin-left: 10px;
    font-size: 14px;
    .ft-tp-ft {
      margin-top: 30px;
      color: red;
    }
  }
}
.foot-center {
  font-size: 12px;
  padding: 0 10px;
  h6 {
    margin: 15px 0;
  }
  ol {
    display: flex;
    flex-wrap: wrap;
    li {
      padding: 6px 6px;
      border: 1px solid #ccc;
      border-radius: 4px;
      // color: #999;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .active {
      border-color: red;
    }
  }
}
.foot-bottom {
  font-size: 14px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-top: 1px solid #ccc;
}
</style>